<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Validate.js</title>
  <link rel="shortcut icon" type="image/png" href="favicon.png">
  <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/7.4/styles/default.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/7.4/styles/github.min.css">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/7.4/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.25/bluebird.min.js"></script>
  <script src="https://cdn.jsdelivr.net/xdate/0.8/xdate.min.js"></script>
  <script src="validate.js"></script>
  <style>
    html, body {
      min-height: 100%;
      height: 100%;
    }

    body {
      font-weight: 200;
      font-family: Helvetica, Arial, sans-serif;
    }

    h1, h2, h3 {
      font-weight: 200;
    }

    #fork-me {
      position: absolute;
      right: 0;
      top: 0;
      -webkit-transform: translateZ(0);
    }

    header {
      z-index: 10;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    header .title {
      font-size: 25px;
      line-height: 50px;
      border-bottom: none;
      display: inline-block;
      margin: 0;
      padding: 0;
      display: none;
    }

    #menu-button {
      display: none;
      width: 30px;
      border: none;
      background: none;
      padding: 0;
      margin: 15px 10px;
      -webkit-transform: translateZ(0);
    }

    #menu-button .bar {
      width: 100%;
      height: 4px;
      background-color: black;
      border-radius: 1px;
      margin-top: 4px;
    }

    #menu-button .bar:first-child {
      margin-top: 0;
    }

    #sidebar {
      background-color: #F7F5FA;
      box-sizing: border-box;
      padding-top: 10px;
      padding-left: 10px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      width: 299px;
      border-right: 1px solid #eee;
      position: fixed;
      left: 0;
      top: 0;
      height: 100%;
      min-height: 100%;
      max-height: 100%;
    }

    #sidebar a {
      color: #333;
      text-shadow: 0 1px 0 #FFF;
    }

    #sidebar ul {
      list-style: none;
      margin: 0;
      padding-left: 10px;
    }

    #sidebar > ul > li {
      margin-bottom: 10px;
    }

    #sidebar > ul > li > a {
      font-size: 16px;
      font-weight: 400;
    }

    #sidebar ul ul li {
      padding-left: 10px;
      position: relative;
    }

    #sidebar ul ul li:after {
      display: block;
      content: '-';
      position: absolute;
      left: 0px;
      top: 0;
    }

    #sidebar ul ul li.external:after {
      content: "»";
    }

    #content {
      margin-left: 299px;
      -webkit-transform: translateZ(0);
    }

    #scroller {
      position: relative;
    }

    #scroll-content {
      max-width: 800px;
      min-width: 640px;
      padding: 0 30px 30px;
    }

    #scroll-content > div {
      padding: 10px 0;
    }

    #scroll-content > div:first-child {
      padding-top: 0;
    }

    #validate-js h2 {
      margin-top: 20px;
    }

    .banner h1 {
      font-size: 50px;
      text-transform: uppercase;
      border-bottom: 5px solid #333;
      display: inline-block;
    }

    .download {
      margin-top: 20px;
    }

    .download .btn {
      width: 250px;
      display: inline-block;
      vertical-align: top;
    }

    .download .info {
      display: inline-block;
      font-size: 12px;
      margin-left: 5px;
    }

    .download .badges a:hover {
      text-decoration: none;
    }

    .dependencies {
      margin-top: 20px;
    }

    h2 {
      margin-top: 0;
    }

    .signature {
      margin-bottom: 10px;
    }

    .signature b {
      margin-right: 5px;
      font-size: 18px;
    }

    pre > code {
      padding: 0;
      background-color: transparent;
    }

    .notes {
      font-style: italic;
    }

    ul > li > code {
      display: inline-block;
      margin-bottom: 3px;
    }

    #validators > div, #utilities > div {
      padding: 10px 0px;
    }

    #changelog h3 {
      font-size: 14px;
    }

    #changelog h3 .version {
      font-size: 18px;
    }

    @media (max-width: 945px) {
      body {
        padding-left: 0;
      }

      #fork-me {
        display: none;
      }

      header {
        background-color: white;
        height: 50px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0px 2px black;
        -moz-box-shadow: 0px 2px black;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
      }

      header #menu-button, header .title {
        display: inline-block;
      }

      .banner {
        text-align: center;
      }

      .download {
        text-align: center;
      }

      .download .btn {
        width: 100%;
        margin-bottom: 3px;
      }

      .banner h1 {
        font-size: 40px;
        margin-top: 0;
      }

      #sidebar {
        left: -299px;
        top: 50px;
        padding-top: 10px;
        z-index: 10;
        -webkit-transition: left 250ms ease-in;
      }

      .sidebar-shown #sidebar {
        left: 0;
        -webkit-transition-timing-function: ease-out;
      }

      #content {
        margin-top: 50px;
        padding-top: 20px;
        margin-left: 0;
        overflow: hidden;
      }

      #scroll-content {
        min-width: 0;
        padding: 10px;
      }

      code {
        white-space: normal;
      }

      pre {
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
      }

      pre code {
        min-width: 600px;
      }
    }
  </style>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-45797376-1', 'validatejs.org');
    ga('require', 'displayfeatures');
    ga('send', 'pageview');
  </script>
</head>
<body>
  <nav id="sidebar">
    <ul>
      <li>
        <a href="#validate-js">Validate.js</a>
        <ul>
          <li class="external">
            <a href="https://github.com/ansman/validate.js">GitHub Repository</a>
          </li>
          <li class="external">
            <a href="docs/validate.html">Annotated source</a>
          </li>
        </ul>
      </li>
      <li><a href="#downloads">Downloads</a></li>
      <li><a href="#installing">Installing</a></li>
      <li><a href="#dependencies">Dependencies</a></li>
      <li>
        <a href="#overview">Overview</a>
        <ul>
          <li><a href="#supported-runtimes">Supported runtimes</a></li>
          <li><a href="#examples">Examples</a></li>
          <li><a href="#acknowledgements">Acknowledgements</a></li>
        </ul>
      </li>
      <li><a href="#constraints">Constraints</a></li>
      <li>
        <a href="#validate">Validate function</a>
        <ul>
          <li><a href="#validate-async">Async validation</a></li>
          <li><a href="#validate-single">Single value validation</a></li>
          <li><a href="#validate-nested">Nested validation</a></li>
          <li><a href="#validate-default-options">Default options</a></li>
        </ul>
      </li>
      <li>
        <a href="#custom-validator">Writing your own validator</a>
        <ul>
          <li><a href="#custom-validator-async">Writing an async validator</a></li>
        </ul>
      </li>
      <li>
        <a href="#validators">Validators</a>
        <ul>
          <li><a href="#validators-presence">Presence</a></li>
          <li><a href="#validators-length">Length</a></li>
          <li><a href="#validators-numericality">Numericality</a></li>
          <li><a href="#validators-datetime">Datetime</a></li>
          <li><a href="#validators-date">Date</a></li>
          <li><a href="#validators-format">Format</a></li>
          <li><a href="#validators-inclusion">Inclusion</a></li>
          <li><a href="#validators-exclusion">Exclusion</a></li>
          <li><a href="#validators-email">Email</a></li>
          <li><a href="#validators-equality">Equality</a></li>
        </ul>
      </li>
      <li>
        <a href="#utilities">Utilities</a>
        <ul>
          <li><a href="#utilities-capitalize">capitalize</a></li>
          <li><a href="#utilities-clean-attributes">cleanAttributes</a></li>
          <li><a href="#utilities-collect-form-values">collectFormValues</a></li>
          <li><a href="#utilities-contains">contains</a></li>
          <li><a href="#utilities-extend">extend</a></li>
          <li><a href="#utilities-format">format</a></li>
          <li><a href="#utilities-get-deep-object-value">getDeepObjectValue</a></li>
          <li><a href="#utilities-is-array">isArray</a></li>
          <li><a href="#utilities-is-date">isDate</a></li>
          <li><a href="#utilities-is-defined">isDefined</a></li>
          <li><a href="#utilities-is-dom-element">isDomElement</a></li>
          <li><a href="#utilities-is-empty">isEmpty</a></li>
          <li><a href="#utilities-is-function">isFunction</a></li>
          <li><a href="#utilities-is-integer">isInteger</a></li>
          <li><a href="#utilities-is-number">isNumber</a></li>
          <li><a href="#utilities-is-object">isObject</a></li>
          <li><a href="#utilities-is-promise">isPromise</a></li>
          <li><a href="#utilities-is-string">isString</a></li>
          <li><a href="#utilities-prettify">prettify</a></li>
          <li><a href="#utilities-result">result</a></li>
        </ul>
      </li>
      <li>
        <a href="#changelog">Changelog</a>
        <ul>
          <li><a href="#changelog-wip">WIP</a></li>
          <li><a href="#changelog-0-8-0">0.8.0</a></li>
          <li><a href="#changelog-0-7-1">0.7.1</a></li>
          <li><a href="#changelog-0-7-0">0.7.0</a></li>
          <li><a href="#changelog-0-6-1">0.6.1</a></li>
          <li><a href="#changelog-0-6-0">0.6.0</a></li>
          <li><a href="#changelog-0-5-0">0.5.0</a></li>
          <li><a href="#changelog-0-4-0">0.4.0</a></li>
          <li><a href="#changelog-0-3-2">0.3.2</a></li>
          <li><a href="#changelog-0-3-1">0.3.1</a></li>
          <li><a href="#changelog-0-3-0">0.3.0</a></li>
          <li><a href="#changelog-0-2-0">0.2.0</a></li>
          <li><a href="#changelog-0-1-3">0.1.3</a></li>
          <li><a href="#changelog-0-1-2">0.1.2</a></li>
          <li><a href="#changelog-0-1-1">0.1.1</a></li>
          <li><a href="#changelog-0-1-0">0.1.0</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <header>
    <button id="menu-button">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </button>
    <div class="title">Validate.js</div>
  </header>
  <div id="content">
    <div id="scroller">
      <a id="fork-me" href="https://github.com/ansman/validate.js"><img src="https://raw.github.com/aral/fork-me-on-github-retina-ribbons/master/images-after-imageoptim/fork-me-right-grey@2x.png" alt="Fork me" width="149" height="149"></a>
      <div id="scroll-content">
        <div id="validate-js">
          <div class="banner"><h1>Validate.js</h1></div>
          <p>
            Validate.js provides a declarative way of validating javascript objects.
          </p>
          <p>
            It is unit tested with 100% code coverage and can be considered fit
            for production.
          </p>
          <p>
            The project can be found on <a href="https://github.com/ansman/validate.js">GitHub</a>
            where you can also find our <a href="https://github.com/ansman/validate.js/issues">issue tracker</a>.
            There is also a <a href="https://travis-ci.org/ansman/validate.js" target="_blank">Travis project</a>
            used for testing,
            a <a href="https://coveralls.io/r/ansman/validate.js" target="_blank">Coveralls project</a>
            used to code coverage
            as well as the <a href="docs/validate.html">annotated source</a>.
          </p>
          <p class="notes">
            Validate.js is an open source component of <a href="https://www.wrapp.com">Wrapp</a>
            and is licensed under <a href="LICENSE.txt">the MIT license</a>.
          </p>
          <h2 id="downloads">Downloads</h2>
          <div class="download">
            <a class="btn btn-default" download href="validate.js">Development version (0.8.0)</a>
            <div class="info">
              <span class="details">31KB, uncompressed and plenty of comments</span>
            </div>
          </div>
          <div class="download">
            <a class="btn btn-primary" download href="validate.min.js">Production version (0.8.0)</a>
            <div class="info">
              <span class="details">4.1KB, minified and gzipped</span><br>
              <a download href="validate.min.map">(Source map)</a>
            </div>
          </div>
          <div class="download">
            <a class="btn btn-danger" download href="https://raw.github.com/ansman/validate.js/master/validate.js">Bleeding edge</a>
            <div class="info badges">
              <span class="details">Might not be 100% stable</span><br>
              <a href="https://travis-ci.org/ansman/validate.js" target="_blank">
                <img src="https://travis-ci.org/ansman/validate.js.svg?branch=master" alt="Build Status">
              </a>
              <a href="https://coveralls.io/r/ansman/validate.js" target="_blank">
                <img src="https://coveralls.io/repos/ansman/validate.js/badge.svg?branch=master" alt="Coverage Status" />
              </a>
            </div>
          </div>
          <div id="installing">
            <h2>Installing</h2>
            <b>Browser/CDN</b>
            <pre><code class="html">&lt;script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.8.0/validate.min.js"&gt;&lt;/script&gt;</code></pre>
            <b>Require.js/AMD</b>
            <pre><code class="javascript">require(["validate.js"], function(validate) {
  // ...
});</code></pre>
            <b>npm/node.js</b>
            <pre><code class="bash">$ npm install --save validate.js</code></pre>
            <pre><code class="javascript">var validate = require("validate.js");</code></pre>
            <b>Bower</b>
            <pre><code class="bash">$ bower install --save validate</code></pre>
            <b>Component</b>
            <pre><code class="bash">$ component install ansman/validate.js</code></pre>
          </div>
          <h2 id="dependencies">Dependencies</h2>
          <p class="dependencies">
            There are no required external dependencies but the default parser and
            formatter for the datetime and date validator requires <a href="http://arshaw.com/xdate/">XDate</a> or
            <a href="http://momentjs.com/">moment.js</a>.<br>
            Validate.js will pick them up if they are in the global scope, otherwise
            you can set <code>validate.moment</code> and <code>validate.XDate</code>
            manually, for example like this if using a require based system:
          </p>
          <pre><code class="javascript">var validate = require("validate.js");
validate.moment = require("moment");</code></pre>
          <p class="dependencies">
            If you want to use async validation you need to use a runtime that
            supports <a href="http://www.html5rocks.com/en/tutorials/es6/promises/" target="_blank">Promises</a>.<br>
            You can tell validate.js to use any A+ compatible promise implemention
            like this:
          </p>
          <pre><code class="javascript">// Simply set validate.Promise to be the promise constructor
// RSVP works
validate.Promise = RSVP.Promise;
// and Q.js too
validate.Promise = Q.Promise;</code></pre>
        </div>
        <div id="overview">
          <h2>Overview</h2>
          <p>
            There are already many validation libraries out there today but most of them
            are very tightly coupled to a language or framework.
          </p>
          <p>
            The goal of validate.js is to provide a cross framework and cross language
            way of validating data. The validation constraints can be declared in JSON
            and shared between clients and the server.
          </p>
          <p>
            <b>Important!</b>
            One thing that is a bit unorthodox is that most validators will consider
            empty values (<code>null</code>, <code>undefined</code>, whitespace
            only strings etc) valid values. So for example adding a constraint of
            at least 6 characters will be like saying <i>If the attribute is given
            it must be at least 6 characters</i>.<br>
            This differs from example Ruby on Rails where validators instead have
            the <code>allow_nil</code> option. I find it quite common that you
            want to have constraints on an optional attribute.<br>
          </p>
          <div id="supported-runtimes">
            <h3>Supported runtimes</h3>
            <p>
              Validate.js works with any ECMAScript 5.1 runtime which means it works in
              both the browser and in node.js
            </p>
            <p>All modern browsers are supported (IE9+, Firefox 3+, Opera 10.5+, Safari 4+, Chrome).</p>
          </div>
          <div id="examples">
            <h3>Examples</h3>
            <p>
              You can find some basic examples <a href="examples.html">included in the project</a>.
            </p>
            <p>
              They are meant to give a feeling for how to use the library and
              should not be considered production ready code.
            </p>
            <p>
              The native HTML form validate has been disabled in a demo purpose
              so that you may see how validate.js works in action.
            </p>
          </div>
          <div id="acknowledgements">
            <h3>Acknowledgements</h3>
            <ul>
              <li>The design of these docs pages have been heavily inspired by <a href="http://backbonejs.org/">backbonejs.org</a>.</li>
              <li>All the validators have been inspired by <a href="http://edgeguides.rubyonrails.org/active_record_validations.html">Rails' validators</a>.</li>
            </ul>
          </div>
        </div>

        <div id="constraints">
          <h2>Constraints</h2>
          <p class="description">The constraints have the following format</p>
          <pre><code class="json">{
  &lt;attribute&gt;: {
    &lt;validator name&gt;: &lt;validator options&gt;
  }
}</code></pre>
          <p class="description">
            Unless otherwise specified you can always specify the <b>message</b>
            option to customize the message returned if the validator doesn't pass.
            Just remember to not include the attribute name since it's automatically
            prepended to the error message.
          </p>
          <p class="description">
            Sometimes it's nice to be able validate field differently depending
            on the input itself.
            validate.js allows the validators object and validator options to be
            a function that should return the constraints/options:
          </p>
          <pre><code class="javascript">var constraints = {
  creditCardNumber: {
    presence: true,
    format: {
      pattern: /^(34|37|4|5[1-5]).*$/,
      message: "must be a valid Amex, Visa or Mastercard number"
    },
    length: function(value, attributes, attributeName, options, constraints) {
      if (value) {
        // Amex
        if ((/^(34|37).*$/).test(value)) return {is: 15};
        // Visa, Mastercard
        if ((/^(4|5[1-5]).*$/).test(value)) return {is: 16};
      }
      // Unknown card, don't validate length
      return false;
    }
  },
  creditCardZip: function(value, attributes, attributeName, options, constraints) {
    if (!(/^(34|37).*$/).test(attributes.creditCardNumber)) return null;
    return {
      presence: true,
      length: {is: 5}
    };
  }
};

validate({creditCardNumber: "4"}, constraints);
// =&gt; {"creditCardNumber": ["Credit card number is the wrong length (should be 16 characters)"]}

validate({creditCardNumber: "4242424242424242"}, constraints);
// =&gt; undefined

validate({creditCardNumber: "340000000000000"}, constraints);
// =&gt; {"creditCardZip": ["Credit card zip can't be blank"]}</code></pre>

          <p class="description">
            If you don't want to give any options to a validator you may pass
            <code>true</code> instead of an empty object. The validator will not
            be run if the options are falsy.
          </p>
          <p class="notes">
            <b>Important!</b> Most validators consider empty values (<code>null</code>, <code>undefined</code>, whitespace
            only strings etc) valid values so make sure you use the
            <code>presence</code> validator on attributes that are required.
          </p>
        </div>

        <div id="validate">
          <h2>Validate function</h2>
          <div class="signature">
            <b>validate</b>
            <code>validate(attributes, constraints, [options])</code>
          </div>
          <p class="description">
            Validates the <b>attributes</b> object against the <b>constraints</b>.<br>
            The <b>attributes</b> must be a plain object or a form element,
            things like backbone models etc are not supported.<br>
            For the format of the <b>constraints</b> see the <a href="#constraints">constraints section</a>.
          </p>
          <p class="description">
            If the <b>attributes</b> objects is an HTML/DOM/jQuery element
            <a href="#utilities-collect-form-values"><code>collectFormValues</code></a>
            is called before validating.
          </p>
          <p class="description">
            If there are no errors nothing is returned. Otherwise an object in this
            format is returned: <code>{&lt;attribute&gt;: [&lt;error&gt;, &lt;error&gt;, ...]}</code>
          </p>
          <p class="description">
            Since validators don't include the argument name in the error message
            the validate function prepends it for them. This behaviour can be
            disabled by setting the <b>fullMessages</b> option to <code>false</code>.
          </p>
          <p class="description">
            If you need an error not to be prefixed by the attribute add a leading
            <code>^</code> to the error and it won't be prepended. If you need to
            have a leading <code>^</code> but want the prefixing just write <code>\^</code>.
          </p>
          <p class="description">
            If you include <code>%{value}</code> in the error message it will be
            replaced with the actual value. The value is transformed using
            <code>validate.stringifyValue</code> (which per default just calls
            <code>validate.prettify</code>) but it can be overidden to customize
            the formatting.
          </p>
          <p class="description">
            If you want to customize how the attribute names are prettified you
            can just override the <code>validate.prettify</code> to your liking.
          </p>
          <p class="description">
            There is also a <b>format</b> option which accepts the following
            values:
          </p>
          <ul>
            <li><code>"grouped"</code> (default) - Returns error messages grouped by attribute.</li>
            <li><code>"flat"</code> - Returns a flat list of error messages.</li>
            <li><code>"detailed"</code> - Returns a list of error objects containing more info on the error (see example). Each object will only contain a single message.</li>
          </ul>
          <pre><code class="javascript">var constraints = {
  username: {
    presence: true,
    exclusion: {
      within: ["nicklas"],
      message: "'%{value}' is not allowed"
    }
  },
  password: {
    presence: true,
    length: {
      minimum: 6,
      message: "must be at least 6 characters"
    }
  }
};
validate({password: "bad"}, constraints);
// =&gt; {
//   "username": ["Username can't be blank"],
//   "password": ["Password must be at least 6 characters"]
// }

validate({username: "nick", password: "better"}, constraints);
// =&gt; undefined

validate({username: "nicklas", password: "better"}, constraints);
// =&gt; {"username": ["Username 'nicklas' is not allowed"]}

validate({password: "better"}, constraints, {fullMessages: false})
// =&gt; {"username": ["can't be blank"]}

validate({}, constraints, {format: "flat"})
// =&gt; ["Username can't be blank", "Password can't be blank"]

validate({username: "nicklas", password: "bad"}, constraints, {format: "detailed"})
// =&gt; [{
//   attribute: "password",
//   error: "Password must be at least 6 characters",
//   options: {
//     minimum: 6,
//     message: "must be at least 6 characters"
//   },
//   validator: "length",
//   value: "bad"
// }]

validate({}, {username: {presence: {message: "^You must pick a username"}}});
// =&gt; {"username": ["You must pick a username"]}</code></pre>
          <div id="validate-async">
            <h3>Async validation</h3>
            <div class="signature">
              <b>validate.async</b>
              <code>validate.async(attributes, constraints, [options])</code>
            </div>
            <p class="description">
              Even though none of the built in validators are async it is sometimes
              useful to have async validations. One example would be to check if
              a username is already used by asking the server.
            </p>
            <p class="description">
              Validate.js supports async validations through the <code>validate.async</code>
              function. It has the same signature as the regular validation function.
            </p>
            <p class="description">
              <code>validate.async</code> returns a
              <a href="http://www.html5rocks.com/en/tutorials/es6/promises/" target="_blank">Promise</a>
              that is resolved if the validation passes and is rejected if the
              validation failed, passing the errors as the first argument.<br>
              The errors has the same format as the errors from the regular validation function.
            </p>
            <p class="description">
              Besides accepting all options as the non async validation function
              it also accepts two additional options; <b>cleanAttributes</b> which,
              unless <code>false</code>, makes <code>validate.async</code>
              call <a href="#utilities-clean-attributes"><code>validate.cleanAttributes</code></a>
              before resolving the promise and <b>wrapErrors</b> which can be
              a function or constructor that will be called with the errors,
              options, attributes and constraints if an error occurs. This allows
              you to define a better way of catching validation errors.
            </p>
            <p class="description">
              If an <code>Error</code> is thrown from an async validator the
              argument passed to the rejection handler will be that error. This
              allows you to differentiate from coding errors and validation errors.
            </p>
            <p class="description">
               You can use the async validate function even if no validations
               are async, it still returns a promise. You can not, however, use
               the regular function with async validations.
            </p>
            <p class="description">
              Any A+ type promise can be used, just override <code>validate.Promise</code>
              with the constructor of the new Promise implementation.
            </p>
            <p class="description">
              Validate.js will try to use the global Promise function if it exists
              otherwise it will throw an exception when using <code>validate.async</code>
            </p>
            <p class="notes">
              Please note that jQuery's promise implementation is not A+
              compatible and will not work.
            </p>
            <p class="description">Example:</p>
            <pre><code class="javascript">function success(attributes) {
  console.log("Success!", attributes);
}

function error(errors) {
  if (errors instanceof Error) {
    // This means an exception was thrown from a validator
    console.err("An error ocurred", errors);
  } else {
    console.log("Validation errors", errors);
  }
}

var constraints = {
  name: {
    presence: true
  },
  // This is so the country doesn't get removed when cleaning the attributes
  country: {}
};

var attributes = {
  name: "Nicklas",
  country: "Sweden",
  someMaliciousAttribute: "scary value"
};

// Will call the success function and log {
//   name: "Nicklas",
//   country: "Sweden"
// }
validate.async(attributes, constraints).then(success, error);

// Will call the error function
validate.async({}, constraints).then(success, error);

function ValidationErrors(errors, options, attributes, constraints) {
  Error.captureStackTrace(this, this.constructor);
  this.errors = errors;
  this.options = options;
  this.attributes = attributes;
  this.constraints = constraints;
}
ValidationErrors.prototype = new Error();

// This isn't supported by the ES6 promises
validate.async({}, constraints, {wrapErrors: ValidationErrors})
  .then(success)
  .catch(ValidationErrors, function(error) {
    // Handle the validation errors
    console.log("ValidationErrors", error);
  })
  .catch(function(error) {
    // Handle other errors;
    console.log("SystemError", error);
  });

// Supporting another promise implementation (RSVP in this case)
validate.Promise = RSVP.Promise;</code></pre>
          </div>
          <div id="validate-single">
            <h3>Single value validation</h3>
            <div class="signature">
              <b>validate.single</b>
              <code>validate.single(value, constraints, [options])</code>
            </div>
            <p class="description">
              Sometimes you only want to validate a single value against some
              constraints and using the normal validate function is quite
              verbose so there is a shorthand for this.
            </p>
            <p class="description">
              It does little more than proxying the call do the main validation
              function but with the value wrapped in an object and the options
              <b>fullMessages</b> and <b>format</b> set to <code>"flat"</code>.
              This is because there is no name which means it can't produce
              full messages.
            </p>
            <p class="description">
              You can use the provided <a href="#utilities-format">format</a>,
              <a href="#utilities-capitalize">capitalize</a> and
              <a href="#utilities-prettify">prettify</a>
              utility functions to append your own name.
            </p>
            <pre><code class="javascript">validate.single(null, {presence: true, email: true});
// =&gt; ["can't be blank"]

validate.single("foo", {presence: true, email: true});
// =&gt; ["is not a valid email"]

validate.single("foo@bar.com", {presence: true, email: true});
// =&gt; undefined</code></pre>
          </div>
          <div id="validate-nested">
            <h3>Nested validation</h3>
            <p class="description">
              Validate.js also has limited support for nested objects (objects
              within objects) using the dot notation.
            </p>
            <p class="description">
              The implementation is fairly basic and doesn't do anything clever
              with the messages. It doesn't support things like only validating a
              sub key if the parent key is present so for more advanced validations
              multiple validation schemas are recommended.
            </p>
            <pre><code class="javascript">var constraints = {
  "addresses.shipping": {
    presence: true
  },
  "addresses.shipping.street": {
    format: {
      // Must be numbers followed by a name
      pattern: "^[0-9]+ .+$",
      message: "^The street for the shipping address must be a valid street name"
    }
  }
};

validate({}, constraints);
// =&gt; {"addresses.shipping": ["Addresses shipping can't be blank"]}

validate({addresses: {shipping: {street: "Foobar"}}}, constraints);
// =&gt; {"addresses.shipping.street": ["The street for the shipping address must be a valid street name"]}

validate({"foo.bar": 3}, {"foo\\.bar": {numericality: {even: true}}});
// =&gt; {"foo\.bar": ["Foo bar must be even"]}</code></pre>
          </div>
          <div id="validate-default-options">
            <h3>Default options</h3>
            <p class="description">
              Both the <code>validate</code>, <code>validate.async</code> as well
              as all validators support specifying default options by setting
              the <code>options</code> property on the respective function or
              validator.
            </p>
            <p class="description">
              Most validators allow you to specify default messages in addition
              to default options, refer to the documentation for the individual
              validators for information on how to do this.
            </p>
            <pre><code class="javascript">var constraints = {
  name: {
    presence: true
  }
};

validate.options = {format: "flat"};
validate.async.options = {format: "flat", cleanAttributes: false};
validate.validators.presence.options = {message: "can't be empty"};

// The default options will be used for both the
// validator and the validate function
validate({}, constraints);
// =&gt; ["Name can't be empty"]

// The default options are not used if the constraints options are falsy
validate({format: "grouped"}, {});
// =&gt; undefined</code></pre>
          </div>
        </div>
        <div id="custom-validator">
          <h2>Writing your own validator</h2>
          <p class="description">
            Writing your own validator is super simple! Just add it to the
            <code>validate.validators</code> object and it will be automatically
            picked up.
          </p>
          <p class="description">
            The validator receives the following arguments:
          </p>
          <ol>
            <li><b>value</b> - The value exactly how it looks in the attribute object.</li>
            <li>
              <b>options</b> - The options for the validator. Guaranteed to not
              be <code>null</code> or <code>undefined</code>.
            </li>
            <li>
              <b>key</b> - The attribute name.
            </li>
            <li>
              <b>attributes</b> - The entire attributes object.
            </li>
            <li>
              <b>globalOptions</b> - The options passed when calling
              <code>validate</code> (will always be an object, non null).
            </li>
          </ol>
          <p class="description">
            If the validator passes simply return <code>null</code> or <code>undefined</code>.
            Otherwise return a string or an array of strings containing the
            error message(s).<br>
            Make sure not to append the key name, this will be done automatically.
          </p>
          <pre><code class="javascript">validate.validators.custom = function(value, options, key, attributes) {
  console.log(value);
  console.log(options);
  console.log(key);
  console.log(attributes);
  return "is totally wrong";
};

// Will log:
//   - "some value"
//   - "some options"
//   - "foo"
//   - {"foo": "some value"}
validate({foo: "some value"}, {foo: {custom: "some options"}});
// =&gt; {foo: ["Foo is totally wrong"]}</code></pre>
          <div id="custom-validator-async">
            <h3>Writing an async validator</h3>
            <p class="description">
              Async validators are equal to a regular one in every way except
              in what they return. An async validator should return a promise
              (usually a <code>validate.Promise</code> instance).
            </p>
            <p class="description">
              The promise should be resolved with the error (if any) as its only
              argument when it's complete.
            </p>
            <p>
              If the validation could not be completed or if an error occurs
              you can call the reject handler with an <code>Error</code>
              which will make the whole validation fail and be rejected.
            </p>
            <pre><code class="javascript">validate.validators.myAsyncValidator = function(value) {
  return new validate.Promise(function(resolve, reject) {
    setTimeout(function() {
      if (value === "foo") resolve();
      else resolve("is not foo");
    }, 100);
  });
};

var constraints = {name: {myAsyncValidator: true}}
  , success = alert.bind(this, "The validations passed")
  , error = function(errors) {
      alert(JSON.stringify(errors, null, 2));
    };

// Will call the success callback
validate.async({name: "foo"}, constraints).then(success, error);

// Will call the error callback with {name: ["Name is not foo"]} as the first argument
validate.async({name: "bar"}, constraints).then(success, error);</code></pre>
          </div>
        </div>
        <div id="validators">
          <h2>Validators</h2>
          <div id="validators-presence">
            <div class="signature"><b>presence</b></div>
            <p class="description">
              The presence validator validates that the value isn't empty.
              This validator will probably the most used one, it corresponds to
              HTML5's required attribute.<br>
              You can use the <b>message</b> option to customize the message. The
              default message is <i>can't be blank</i> and can be changed by
              setting <code>validate.validators.presence.message</code>.
            </p>
            <p class="description">
              These are the values that are considered empty:
            </p>
            <ul>
              <li><code>null</code></li>
              <li><code>undefined</code></li>
              <li><code>[]</code> (empty objects)</li>
              <li><code>{}</code> (empty arrays)</li>
              <li><code>""</code> (empty string)</li>
              <li><code>" "</code> (whitespace only string)</li>
            </ul>
            <p class="notes">
              <b>Important!</b> All other values are considered valid (including functions)!
            </p>

            <pre><code class="javascript">validate({}, {username: {presence: true}})
// =&gt; {"username": ["Username can't be blank"]}

validate({username: "ansman"}, {username: {presence: true}})
// =&gt; undefined

validate({}, {username: {presence: {message: "is required"}}})
// =&gt; {"username": ["Username is required"]}

validate.validators.presence.message = "is required";
validate({}, {username: {presence: true}});
// =&gt; {"username": ["Username is required"]}
</code></pre>
          </div>

          <div id="validators-length">
            <div class="signature"><b>length</b></div>
            <p class="description">
              The length validator will check the length of a string.<br>
              Any object with the <code>length</code> property can be validated
              but all the default error messages refers to strings so make sure
              you override them if you plan on validating arrays using this.
            </p>
            <p class="description">
              You may specify the following length constraints:
            </p>
            <dl class="dl-horizontal">
              <dt>is</dt>
              <dd>
                The value has to have exactly this length. The default error is
                <i>is the wrong length (should be %{count} characters)</i>
              </dd>
              <dt>minimum</dt>
              <dd>
                The value cannot be shorter than this value. The default error is
                <i>is too short (minimum is %{count} characters)</i>
              </dd>
              <dt>maximum</dt>
              <dd>
                The value cannot be longer than this value. The default error is
                <i>is too long (maximum is %{count} characters)</i>
              </dd>
            </dl>
            <p class="description">
              You can specify the error message using the <b>wrongLength</b>,
              <b>tooShort</b> and <b>tooLong</b> options. The default values are
              <i>is the wrong length (should be %{count} characters)</i>,
              <i>is too short (minimum is %{count} characters)</i> and
              <i>is too long (maximum is %{count} characters)</i> respectively.<br>
              <br>
              As you may have noticed you can use <code>%{count}</code> as a placeholder
              for the actual constraint and it will be replaced for you.
            </p>
            <p class="description">
              The default messages can also be changed by setting the following
              attributes on <code>validate.validators.length</code>:
            </p>
            <ul>
              <li><code>notValid</code></li>
              <li><code>tooLong</code></li>
              <li><code>tooShort</code></li>
              <li><code>wrongLength</code></li>
            </ul>
            <p class="description">
              You can also use the <b>message</b> as the message for all errors
              (this overrides any other custom errors).
            </p>
            <p class="description">
              Per default the number of characters are counted (using the <code>length</code>
              property), if you want to count something else you can specify the
              <b>tokenizer</b> option which should be a function that takes a single
              argument (the value) and the returns a value that should be used when
              counting.<br>
              <br>
              The tokenizer will never be called with <code>nil</code> or <code>undefined</code>
              as an argument.
            </p>
            <p class="description">
              Once important thing to note is that the value needs to have a numeric
              value for the <code>length</code> property or the message <i>has an incorrect length</i>
              is returned.<br>
              An error is also logged to the console since this is considered a
              coding error.
            </p>
            <pre><code class="javascript">var constraints = {
  key1: {length: {is: 3}},
  key2: {length: {minimum: 20}},
  key3: {length: {maximum: 3}},
  key4: {
    length: {
      minimum: 3,
      tooShort: "needs to have %{count} words or more",
      tokenizer: function(value) {
        return value.split(/\s+/g);
      }
    }
  }
};

validate({}, constraints);
// =&gt; undefined
// This is because nil and undefined are valid values.
// Use the presence validator if you don't want to allow empty values.

var values = {
  key1: "wrong length",
  key2: "too short",
  key3: "too long",
  key4: "too short"
};
validate(values, constraints);
// =&gt; {
//   "key1": ["Key1 is the wrong length (should be 3 characters)"],
//   "key2": ["Key2 is too short (minimum is 20 characters)"],
//   "key3": ["Key3 is too long (maximum is 3 characters)"],
//   "key4": ["Key4 needs to have 3 words or more"]
// }</code></pre>
          </div>

          <div id="validators-numericality">
            <div class="signature"><b>numericality</b></div>
            <p class="description">
              The numericality validator will only allow numbers.
              Per default strings are coerced to numbers using the <code>+</code>
              operator. If this is not desirable you can set the <b>noStrings</b>
              option to <code>true</code> to disable this behaviour.
            </p>
            <p class="description">
              The following constraints can be applied:
            </p>
            <dl class="dl-horizontal">
              <dt>onlyInteger</dt>
              <dd>Real numbers won't be allowed. The error message is <i>must be an integer</i></dd>
              <dt>greaterThan</dt>
              <dd>The input has to be greater than this value. The error message is <i>must be greater than %{count}</i></dd>
              <dt>greaterThanOrEqualTo</dt>
              <dd>The input has to be at least this value. The error message is <i>must be greater than or equal to %{count}</i></dd>
              <dt>equalTo</dt>
              <dd>The input has to be exactly this value. The error message is <i>must be equal to %{count}</i></dd>
              <dt>lessThanOrEqualTo</dt>
              <dd>The input can be this value at the most. The error message is <i>must be less than or equal to %{count}</i></dd>
              <dt>lessThan</dt>
              <dd>The input has to be less than this value. The error message is <i>must be less than %{count}</i></dd>
              <dt>odd</dt>
              <dd>The input has to be odd. The error message is <i>must be odd</i></dd>
              <dt>even</dt>
              <dd>The input has to be even. The error message is <i>must be even</i></dd>
            </dl>
            <p class="description">
              If you want a custom error message you may specify it using the
              <b>message</b> option or by settings one of the following default
              messages on the <code>validate.validators.numericality</code> object:
            </p>
            <ul>
              <li><code>notValid</code></li>
              <li><code>notInteger</code></li>
              <li><code>notGreaterThan</code></li>
              <li><code>notGreaterThanOrEqualTo</code></li>
              <li><code>notEqualTo</code></li>
              <li><code>notLessThan</code></li>
              <li><code>notLessThanOrEqualTo</code></li>
              <li><code>notOdd</code></li>
              <li><code>notEven</code></li>
            </ul>
            <pre><code class="javascript">// null and undefined are valid values regardless of the options
validate({}, {duration: {numericality: true}});
//= &gt; undefined

validate({duration: "foobar"}, {duration: {numericality: true}});
// =&gt; {"duration": ["Duration is not a number"]}

validate({duration: "3"}, {duration: {numericality: true}});
// =&gt; undefined

validate({duration: "3"}, {duration: {numericality: {noStrings: true}}});
// =&gt; {"duration": ["Duration is not a number"]}

var constraints = {
  duration: {
    numericality: {
      onlyInteger: true,
      greaterThan: 0,
      lessThanOrEqualTo: 30,
      even: true
    }
  }
};

validate({duration: 3.14}, constraints);
// =&gt; {"duration": ["Duration must be an integer"]}

validate({duration: 4711}, constraints);
// =&gt; {
//   "duration": [
//     "Duration must be less than or equal to 30",
//     "Duration must be even"
//   ]
// }</code></pre>
          </div>

          <div id="validators-datetime">
            <div class="signature"><b>datetime</b></div>
            <p class="description">
              This datetime validator can be used to validate dates and times.
              The default implementation supports <a href="http://arshaw.com/xdate/" target="_blank">XDate</a>
              and <a href="http://momentjs.com/">moment.js</a> but it's easy to use any
              date library (see example below).
            </p>
            <p class="description">
              Validate.js looks for moment and XDate in the global scope, if it
              isn't found you can set <code>validate.moment</code> and
              <code>validate.XDate</code> manually.
            </p>
            <p class="description">
              You can specify the follow constraints:
            </p>
            <dl class="dl-horizontal">
              <dt>earliest</dt>
              <dd>
                The date cannot be before this time. This argument will be parsed
                using the <code>parse</code> function, just like the value.
                The default error <i>must be no earlier than %{date}</i>
              </dd>
              <dt>latest</dt>
              <dd>
                The date cannot be after this time. This argument will be parsed
                using the <code>parse</code> function, just like the value.
                The default error <i>must be no later than %{date}</i>
              </dd>
              <dt>dateOnly</dt>
              <dd>
                If true, only dates (not datetimes) will be allowed.
                The default error is <i>must be a valid date</i>
              </dd>
              <dt>dateFormat</dt>
              <dd>
                The format for dates. The values for this will be different
                depending on which date library is used. Check the XDate or
                moment.js documentation for more information.
              </dd>
            </dl>
            <p class="description">
              You can change the default message by setting any of these settings
              on the <code>validate.validators.datetime</code> object:
            </p>
            <ul>
              <li><code>notValid</code></li>
              <li><code>tooEarly</code></li>
              <li><code>tooLate</code></li>
            </ul>
            <p class="description">
              If you want to use some other library you can override the
              <code>parse</code> and <code>format</code> functions:
            </p>
            <pre><code class="javascript">validate({}, {departure: {datetime: true}});
// =&gt; undefined

validate({departure: "foobar"}, {departure: {datetime: true}});
// =&gt; {"departure": ["Departure must be a valid date"]}

validate({departure: "2013-12-11 10:09:08", {departure: {datetime: true}}});
// =&gt; undefined

var constraints = {
  birthday: {
    datetime: {
      dateOnly: true,
      latest: XDate.today().addYears(-18),
      message: "^You need to be atleast 18 years old"
    }
  }
};

validate({birthday: "3013-11-14 22:34:52"}, constraints);
// =&gt; {"birthday": ["Birthday must be a valid date"]}

validate({birthday: "3013-11-14"}, constraints);
// =&gt; {"birthday": ["You need to be atleast 18 years old"]}


// If you want to use another library override the two methods below:

// Value will be the input (guaranteed not to be null or undefined) and options
// are options given to the validator.
// This function should return the number of milliseconds since the UTC epoch
// or NaN if it's not a valid date.
validate.validators.datetime.parse = function(value, options) {
  return new XDate(value, true).getTime();
};

// This function is only used when formatting dates for error messages.
// Value is the number of milliseconds since the UTC epoch.
// You should return a formatted strings of the given date.
// Make sure to check options.dateOnly and options.dateFormat when formatting.
validate.validators.datetime.format = function(value, options) {
  var format = options.dateFormat || (options.dateOnly ? "yyyy-MM-dd" : "u");
  return new XDate(date, true).toString(format);
};</code></pre>
            <p class="notes">
              You may also want to override the <code>format</code> function in order to
              customize the formatting of dates which are formatted as
              <a href="https://en.wikipedia.org/wiki/ISO8601" target="_blank">ISO8601</a> per default.<br>
              If you want to change the parsing but keep using XDate you can
              create a <a href="https://gist.github.com/arshaw/1221373" target="_blank">custom XDate parser</a>.
            </p>
          </div>
          <div id="validators-date">
            <div class="signature"><b>date</b></div>
            <p class="description">
              The date validator is just a shorthand for the
              <a href="#validators-datetime">datetime validator</a>
              with the <code>dateOnly</code> option set to <code>true</code>.
            </p>
          </div>
          <div id="validators-format">
            <div class="signature"><b>format</b></div>
            <p class="description">
              The format validator will validate a value against a regular expression
              of your chosing.
              The default message if the value doesn't match is <i>is invalid</i>
              so you'll likely want to customize it by settings <b>message</b>
              to something in the options or by setting a new global default
              message using <code>validate.validators.format.message</code>
            </p>
            <p class="description">
              The <b>pattern</b> option can either be a javascript regexp or
              string that will be passed to the
              <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a>
              constructor. If the pattern is a string and you want to specify flags
              you may use the <b>flags</b> option.
            </p>
            <p class="notes">
              Please note that the whole string must match the regexp, not just a
              part of the value.
            </p>

            <pre><code class="javascript">var pattern = /\d{5}(-\d{4})?/;

validate({}, {zipCode: {format: pattern}});
// =&gt; undefined

validate({zipCode: "foobar"}, {zipCode: {format: pattern}});
// =&gt; {"zipCode": ["Zip code is invalid"]};

validate({zipCode: "12345"}, {zipCode: {format: pattern}});
// =&gt; undefined

var constraints = {
  username: {
    format: {
      pattern: "[a-z0-9]+",
      flags: "i",
      message: "can only contain a-z and 0-9"
    }
  }
};

validate({username: "Nicklas!"}, constraints);
// =&gt; {"username": ["Username can only contain a-z and 0-9"]}

validate({username: "Nicklas"}, constraints);
// =&gt; undefined</code></pre>
          </div>
          <div id="validators-inclusion">
            <div class="signature"><b>inclusion</b></div>
            <p class="description">
              The inclusion validator is useful for validating input from a dropdown
              for example.<br>
              It checks that the given value exists in the list given by the <b>within</b> option.
            </p>
            <p class="description">
              You can specify <b>within</b> as a list or as an object (in which
              case the keys of the object are used).<br>
              The default message is <i>^%{value} is not included in the list</i>
              and can be changed by setting
              <code>validate.validators.inclusion.message</code>
            </p>
            <pre><code class="javascript">var sizes = ["small", "medium", "large"];

validate({}, {size: {inclusion: sizes}});
// =&gt; undefined

validate({size: "xlarge"}, {size: {inclusion: sizes}});
// =&gt; {"size": ["xlarge is not included in the list"]}

var constraints = {
  size: {
    inclusion: {
      within: {"Small": "s", "Medium": "m", "Large": "l"},
      message: "^We're currently out of %{value}"
    }
  }
};

validate({size: "Extra large"}, constraints);
// =&gt; {"size": ["We're currently out of Extra large"]}

validate({size: "Medium"}, constraints);
// =&gt; undefined</code></pre>
          </div>
          <div id="validators-exclusion">
            <div class="signature"><b>exclusion</b></div>
            <p class="description">
              The exclusion validator is useful for restriction certain values.<br>
              It checks that the given value is not in the list given by the
              <b>within</b> option.
            </p>
            <p class="description">
              You can specify <b>within</b> as a list or as an object (in which
              case the keys of the object are used).<br>
              The default message is <i>^%{value} is restricted</i>
              and can be changed by setting
              <code>validate.validators.exclusion.message</code>
            </p>
            <pre><code class="javascript">var restrictedDomains = ["jp", "ch"];

validate({}, {subdomain: {exclusion: restrictedDomains}});
// =&gt; undefined

validate({subdomain: "jp"}, {subdomain: {exclusion: restrictedDomains}});
// =&gt; {"size": ["jp is restricted"]}

var constraints = {
  subdomain: {
    exclusion: {
      within: {jp: "Japan", "ch": "China"},
      message: "^We don't support %{value} right now, sorry"
    }
  }
};

validate({subdomain: "jp"}, constraints);
// =&gt; {"subdomain": ["We don't support jp right now, sorry"]}

validate({subdomain: "com"}, constraints);
// =&gt; undefined</code></pre>
          </div>
          <div id="validators-email">
            <div class="signature"><b>email</b></div>
            <p class="description">
              The email validator attempts to make sure the input is a valid email.<br>
              Validating emails is tricky business due to the complex rules of
              email address formatting.
            </p>
            <p class="description">
              For example <code>john.doe@gmail</code> is a perfectly valid email
              but it's most likely just the case that John has forgotten to write
              <code>.com</code> at the end.
            </p>
            <p class="description">
              Validate.js tries to be pragmatic and allows most valid emails but
              tries to catch common typos such as forgetting the <a href="https://en.wikipedia.org/wiki/TLD" target="_blank">TLD</a>.<br>
              If you want to know more about email validation the
              <a href="https://en.wikipedia.org/wiki/Email_address" target="_blank">Wikipedia article</a>
              and the <a href="http://www.regular-expressions.info/email.html" target="_blank">email page on regular-expressions.info</a>
              are good places to start.
            </p>
            <p class="description">
              You can customize the regexp used by setting <code>validate.validators.email.PATTERN</code>
              to a regexp of your chosing, just remember that javascript regexp
              does substring matching.
            </p>
            <p class="description">
              The default message is <i>is not a valid email</i> and as usual you
              can override it using the <b>message</b> option or by setting
              <code>validate.validators.email.message</code>
            </p>
            <p class="description">
              <b>Important!</b> Besides <code>null</code> and <code>undefined</code> being valid empty strings and whitespace only strings are also valid.
            </p>
            <pre><code class="javascript">var constraints = {
  from: {
    email: true
  }
};

validate({from: null}, constraints);
// =&gt; undefined

validate({from: "   "}, constraints);
// =&gt; undefined

validate({from: "nicklas@ansman"}, constraints);
// =&gt; {"email": ["From is not a valid email"]}

// Any TLD is allowed
validate({from: "nicklas@foo.faketld"}, constraints);
// =&gt; undefined

// Upper cased emails are allowed
validate({from: "NICKLAS@ANSMAN.SE"}, constraints);
// =&gt; undefined

constraints = {
  from: {
    email: {
      message: "doesn't look like a valid email"
    }
  }
};

validate({from: "foobar"}, constraints);
// =&gt; {"email": ["From doesn't look like a valid email"]}

// It allows unicode
validate({from: "first.läst@example.com"}, constraints);
// =&gt; undefined</code></pre>
          </div>
          <div id="validators-equality">
            <div class="signature"><b>equality</b></div>
            <p class="description">
              The equality validator can be used to verify that one attribute
              is always equal to another. <br>
              This is useful when having a "confirm password" input for
              example.
            </p>
            <p class="description">
              You specify which attribute by simply using the name of it
              as the options for the validator or by giving the option
              <b>attribute</b>.
            </p>
            <p class="description">
              By default <code>===</code> is used to check the quality, it you
              need to validate more complex objects you can give a function
              using the <b>comparator</b> option which should be a function
              that accepts two arguments and returns <code>true</code> if they
              objects are equal and <code>false</code> if they are not.
            </p>
            <p class="description">
              The default message is <i>is not equal to %{attribute}</i>
              <code>validate.validators.equality.message</code>
            </p>
            <pre><code class="javascript">var constraints = {
  confirmPassword: {
    equality: "password"
  }
};

validate({password: "foo", confirmPassword: "foo"}, constraints);
// =&gt; undefined

validate({password: "foo", confirmPassword: "bar"}, constraints);
// =&gt; {confirmPassword: ["Confirm password is not equal to password"]}

constraints = {
  complexAttribute: {
    equality: {
      attribute: "otherComplexAttribute",
      message: "is not complex enough",
      comparator: function(v1, v2) {
        return JSON.stringify(v1) === JSON.stringify(v2);
      }
    }
  }
};

validate({complexAttribute: [1,2,3], otherComplexAttribute: [1,2,3]}, constraints);
// =&gt; undefined

validate({complexAttribute: [1,2,3], otherComplexAttribute: [3,2,1]}, constraints);
// =&gt; {complexAttribute: ["Complex attribute is not complex enough"]}</code></pre>
          </div>
        </div>
        <div id="utilities">
          <h2>Utilities</h2>
          <div id="utilities-capitalize">
            <div class="signature">
              <b>capitalize</b>
              <code>validate.capitalize(string)</code>
            </div>
            <p class="description">
              Simply makes the first character in the string upper case.
            </p>
            <pre><code class="javascript">validate.capitalize("foobar");
// =&gt; "Foobar"</code></pre>
          </div>
          <div id="utilities-clean-attributes">
            <div class="signature">
              <b>cleanAttributes</b>
              <code>validate.cleanAttributes(attributes, whitelist)</code>
            </div>
            <p class="description">
              Returns an object that only contains the whitelisted attributes.
              It will remove all attributes that have a falsy value in the whitelist.
            </p>
            <p class="description">
              It also accepts a constraints object used for the validation but
              to make it keep attributes that doesn't have any constraints
              you can simply set the constraints for that attribute to <code>{}</code>.
            </p>
            <pre><code class="javascript">var whitelist = {
  name: true,
  "address.street": true,
  "address.postal": true,
  "something\\.with\\.periods": true
};

var attributes = {
  name: "Nicklas",
  address: {
    street: "Drottninggatan 98",
    postal: "111 60"
  },
  "something.with.periods": "some value",
  id: 4711,
  createdAt: "1970-01-01 00:00"
};

validate.cleanAttributes(attributes, whitelist);
// =&gt; {
//   name: "Nicklas",
//   address: {
//     street: "Drottninggatan 98",
//     postal: "111 60"
//   },
//   "something.with.periods": "some value"
// }

var constraints = {
  name: {
    presence: true
  },
  "address.street": {},
  "address.postal": {},
  "something\\.with\\.periods": {}
};

validate.cleanAttributes(attributes, constraints);
// =&gt; {
//   name: "Nicklas",
//   address: {
//     street: "Drottninggatan 98",
//     postal: "111 60"
//   },
//   "something.with.periods": "some value"
// }</code></pre>
          </div>
          <div id="utilities-collect-form-values">
            <div class="signature">
              <b>collectFormValues</b>
              <code>validate.collectFormValues(rootElement, [options])</code>
            </div>
            <p class="description">
              One of the most common tasks is collecting the values and it was
              only recently this was possible in a native way
              (<a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData" target="_blank">FormData</a>)
              so as a convenience a function for doing this has been added to
              validate.js
            </p>
            <p>
              This function will find all named inputs (inputs that specify the
              name attribute) and collect their values.
            </p>
            <p>
              The given element can be a regular DOM or jQuery element and can
              be doesn't have to be a form element.
            </p>
            <p>
              The following options exists:
            </p>
            <dl class="dl-horizontal">
              <dt>nullify</dt>
              <dd>Converts empty strings to <code>null</code> (default is true)</dd>
              <dt>trim</dt>
              <dd>Trims whitespace from the start and end of the value</dd>
            </dl>
            <p>
              You can ignore inputs by adding the <code>data-ignored</code>
              attribute.
            </p>
            <form id="login" action="/" style="display: none;">
              <input type="text" name="username" value="ansman">
              <input type="password" name="password" value="correcthorsebatterystaple">
              <input type="checkbox" name="remember-me" checked>
              <input type="hidden" name="some-hidden-value" data-ignored>
            </form>
            <pre><code class="html">&lt;form id=&quot;login&quot;&gt;
  &lt;input type=&quot;text&quot; name=&quot;username&quot; value=&quot;ansman&quot;&gt;
  &lt;input type=&quot;password&quot; name=&quot;password&quot; value=&quot;correcthorsebatterystaple&quot;&gt;
  &lt;input type=&quot;checkbox&quot; name=&quot;remember-me&quot; checked&gt;
  &lt;input type=&quot;hidden&quot; name=&quot;some-hidden-value&quot; data-ignored&gt;
&lt;/form&gt;
&lt;script&gt;
var form = document.querySelector(&quot;form#login&quot;);
validate.collectFormValues(form);
// =&gt; {username: &quot;ansman&quot;, password: &quot;correcthorsebatterystaple&quot;, remember-me: false}
&lt;/script&gt;</code></pre>
          </div>
          <div id="utilities-contains">
            <div class="signature">
              <b>contains</b>
              <code>validate.contains(collection, value)</code>
            </div>
            <p class="description">
              Check if the given value exists in the given collection.
              Both arrays and objects are supported.
            </p>
            <pre><code class="javascript">validate.contains({}, "foo");
// =&gt; false

validate.contains({foo: "bar"}, "foo");
// =&gt; true

validate.contains([1, 2, 3], 4);
// =&gt; false

validate.contains([1, 2, 3], 3);
// =&gt; true</code></pre>
          </div>
          <div id="utilities-extend">
            <div class="signature">
              <b>extend</b>
              <code>validate.extend(object, otherObjects...)</code>
            </div>
            <p class="description">
              A clone from underscore's extend. It will copy all attributes
              from the given objects to the first argument and return the
              first argument.
            </p>
            <p class="description">
              This can be used to do a shallow copy of objects by calling
              it with <code>{}</code> as the first argument.
            </p>
            <pre><code class="javascript">var o1 = {foo: "bar"}
  , o2 = {baz: "quux"};

validate.extend(o1, o2) === o1;
// =&gt; true

o1;
// =&gt; {foo: "bar", baz: "quux"};

o2;
// =&gt; {bar: "quux"};

// Makes a copy of o1, doesn't modify o1
validate.extend({}, o1);
// =&gt; {foo: "bar", baz: "quux"};

// o1 is not touched
validate.extend({}, o1) === o1;
// =&gt; false</code></pre>
          </div>
          <div id="utilities-format">
            <div class="signature">
              <b>format</b>
              <code>validate.format(formatString, values)</code>
            </div>
            <p class="description">
              This function allows you do perform basic string substitution.<br>
              It simply finds all <code>%{...}</code> and replaces them with
              the value in the values object.
            </p>
            <p class="description">
              The values are converted to strings using the string constructor.
            </p>
            <p class="description">
              If you want to have the <code>%{...}</code> literal simply prefix
              it with a single <code>%</code>.
            </p>
            <pre><code class="javascript">validate.format("Hi, my name is %{name}", {name: "Nicklas"});
// =&gt; "Hi, my name is Nicklas"

validate.format("%%{this} will not be replaced", {this: "that"});
// =&gt; "%{this} will not be replaced"</code></pre>
          </div>
          <div id="utilities-get-deep-object-value">
            <div class="signature">
              <b>getDeepObjectValue</b>
              <code>validate.getDeepObjectValue(object, keypath)</code>
            </div>
            <p class="description">
              A function that returns attributes from object. If the key
              contains a period (<code>.</code>) it looks for the attribute
              in a nested object. Attributes containing a period can be accessed
              by escaping the period with a <code>\</code>.
            </p>
            <pre><code class="javascript">validate.getDeepObjectValue({foo: "bar"}, "foo");
// =&gt; "bar"

validate.getDeepObjectValue({foo: {bar: {baz: "quux"}}}, "foo.bar.baz");
// =&gt; "quux"

validate.getDeepObjectValue({"foo.bar": "baz"}, "foo\\.bar");
// =&gt; "baz"</code></pre>
          </div>
          <div id="utilities-is-array">
            <div class="signature">
              <b>isArray</b>
              <code>validate.isArray(value)</code>
            </div>
            <p class="description">
              Check if the given value is an array.
            </p>
            <pre><code class="javascript">validate.isArray({});
// =&gt; false

validate.isArray([]);
// =&gt; true</code></pre>
          </div>
          <div id="utilities-is-date">
            <div class="signature">
              <b>isDate</b>
              <code>validate.isDate(value)</code>
            </div>
            <p class="description">
              Check if the given value is a <code>Date</code> instance.
            </p>
            <pre><code class="javascript">validate.isDate(new Date());
// =&gt; true

validate.isDate(null);
// =&gt; false

validate.isDate({});
// =&gt; false</code></pre>
          </div>
          <div id="utilities-is-defined">
            <div class="signature">
              <b>isDefined</b>
              <code>validate.isDefined(value)</code>
            </div>
            <p class="description">
              Check if the given value is not <code>null</code> or
              <code>undefined</code>.
            </p>
            <pre><code class="javascript">validate.isDefined("foobar");
// =&gt; true

validate.isDefined(null);
// =&gt; false

validate.isDefined(undefined);
// =&gt; false</code></pre>
          </div>
          <div id="utilities-is-dom-element">
            <div class="signature">
              <b>isDomElement</b>
              <code>validate.isDomElement(value)</code>
            </div>
            <p class="description">
              Check if the given value is a DOM element.
              This function does slightly more than to just check if it's a DOM
              element. It also checks that the object supports
              <code>querySelector</code> and <code>querySelectorAll</code> which
              is used in the project.
            </p>
            <p>
              Things like jQuery elements are not considered DOM elements.
            </p>
            <pre><code class="javascript">validate.isDomElement({});
// =&gt; false

validate.isDomElement(document.createElement("div"));
// =&gt; true</code></pre>
          </div>
          <div id="utilities-is-empty">
            <div class="signature">
              <b>isEmpty</b>
              <code>validate.isEmpty(value)</code>
            </div>
            <p class="description">
              Check if the given value is non empty. The following value are
              considered empty:
            </p>
            <ul>
              <li><code>null</code></li>
              <li><code>undefined</code></li>
              <li>Empty strings</li>
              <li>Whitespace only strings</li>
              <li>Empty arrays</li>
              <li>Empty objects</li>
            </ul>
            <pre><code class="javascript">validate.isEmpty({});
// =&gt; true

validate.isEmpty(null);
// =&gt; true

validate.isEmpty("");
// =&gt; true

validate.isEmpty("   ");
// =&gt; true

validate.isEmpty("foo");
// =&gt; false

validate.isEmpty({foo: "bar"});
// =&gt; false</code></pre>
          </div>
          <div id="utilities-is-function">
            <div class="signature">
              <b>isFunction</b>
              <code>validate.isFunction(value)</code>
            </div>
            <p class="description">
              Check if the given value is a function. If this returns
              <code>true</code> the value will be callable.
            </p>
            <pre><code class="javascript">validate.isFunction("foobar");
// =&gt; false

validate.isFunction(function() {});
// =&gt; true</code></pre>
          </div>
          <div id="utilities-is-integer">
            <div class="signature">
              <b>isInteger</b>
              <code>validate.isInteger(value)</code>
            </div>
            <p class="description">
              Check if the given value is an integer. If this returns true
              <a href="#utilities-is-number"><code>isNumber</code></a>
              will also return true.
            </p>
            <pre><code class="javascript">validate.isInteger("foobar");
// =&gt; false

validate.isInteger(3.14);
// =&gt; false

validate.isInteger(3);
// =&gt; true</code></pre>
          </div>
          <div id="utilities-is-number">
            <div class="signature">
              <b>isNumber</b>
              <code>validate.isNumber(value)</code>
            </div>
            <p class="description">
              Check if the given value is a number. Unlike most
              <code>isNumber</code> checks this function does not consider
              <code>NaN</code> to be a number.
            </p>
            <pre><code class="javascript">validate.isNumber("foobar");
// =&gt; false

validate.isNumber(3.14);
// =&gt; true</code></pre>
          </div>
          <div id="utilities-is-object">
            <div class="signature">
              <b>isObject</b>
              <code>validate.isObject(value)</code>
            </div>
            <p class="description">
              Check if the given value is an object. This function considers
              arrays objects so be careful if this matters to you.
            </p>
            <pre><code class="javascript">validate.isObject("foobar");
// =&gt; false

validate.isObject({});
// =&gt; true

validate.isObject([]);
// =&gt; true</code></pre>
          </div>
          <div id="utilities-is-promise">
            <div class="signature">
              <b>isPromise</b>
              <code>validate.isPromise(value)</code>
            </div>
            <p class="description">
              Check if the given value is a promise. This used the same
              semantics as the ECMAScript spec which means that any non empty
              object that has a <code>.then</code> function is a promise.
            </p>
            <pre><code class="javascript">validate.isPromise({});
// =&gt; false

validate.isPromise(new Promise(function() {}));
// =&gt; true

validate.isPromise({then: function() {}});
// =&gt; true</code></pre>
          </div>
          <div id="utilities-is-string">
            <div class="signature">
              <b>isString</b>
              <code>validate.isString(value)</code>
            </div>
            <p class="description">
              Check if the given value is a string.
            </p>
            <pre><code class="javascript">validate.isString("");
// =&gt; true

validate.isString({});
// =&gt; false</code></pre>
          </div>
          <div id="utilities-prettify">
            <div class="signature">
              <b>prettify</b>
              <code>validate.prettify(string)</code>
            </div>
            <p class="description">
              Provides a way to clean up strings so that they become human
              readable.
            </p>
            <p class="description">
              It is meant to prettify things like attribute names and other
              programming related entities. It will do the following things:
            </p>
            <ul>
              <li>Split words divided by <code>.</code></li>
              <li>Remove backslashes</li>
              <li>Replace <code>_</code> and <code>-</code> with spaces</li>
              <li>Split cameled cased words</li>
              <li>Make the whole string lower case</li>
              <li>Converts number to strings with no more than 2 decimals</li>
              <li>Calls <code>toString</code> on objects</li>
              <li>Joins arrays with <code>, </code> and calls prettify on all items</li>
            </ul>
            <p class="notes">
              <b>Important!</b> It does not removing leading or trailing period
              since these are not considered separators.
            </p>
            <pre><code class="javascript">validate.prettify("This.is_a-weirdString\\.");
// =&gt; "this is a weird string."</code></pre>
          </div>
          <div id="utilities-result">
            <div class="signature">
              <b>result</b>
              <code>validate.result(value, [arguments...])</code>
            </div>
            <p class="description">
              Calls the value with the specified arguments and returns the
              result if it's a function otherwise it simply returns the value.
            </p>
            <p class="description">
              This is used in validate.js in places where for example options
              can be either an object or a function returning the options.
            </p>
            <p class="notes">
              <b>Important!</b> Since the function is detached it is not
              called with a specific context, therefor this only works when the
              value is a pure function.
            </p>
            <pre><code class="javascript">// Not a function, returns the first argument
validate.result("foobar", 1, 2);
// =&gt; "foobar"

// Returns the result of Math.max(1, 2)
validate.result(Math.max, 1, 2);
// =&gt; 2

// Doesn't work since String#toUpperCase is not a pure function
validate.result("foo".toUpperCase);
// =&gt; Uncaught TypeError: String.prototype.toUpperCase called on null or undefined</code></pre>
          </div>
        </div>
        <div id="changelog">
          <h2>Changelog</h2>
          <div id="changelog-wip">
            <h3>
              <b class="version">WIP</b>
            </h3>
            <ul>
              <li>
                The global validation options are now passed to custom
                validators.
              </li>
              <li>
                Fix a bug where <code>collectFormValues</code> would return
                <code>0</code> for number inputs that had empty or invalid
                values.
              </li>
            </ul>
          </div>
          <div id="changelog-0-8-0">
            <h3>
              <b class="version">0.8.0</b>
              -
              <span class="date">Jul 3, 2015</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.8.0/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.7.1...0.8.0">Diff</a>
            </h3>
            <ul>
              <li>
                <code>collectFormValues</code> now accepts jQuery elements.
              </li>
              <li>
                <code>collectFormValues</code> now collects values from
                textareas too.
                Thanks to <a href="https://github.com/ansman/validate.js/pull/60" target="_blank">helt</a>
                for suggesting and implementing this.
              </li>
              <li>
                Added <code>validate.cleanAttributes</code> as a way of removing
                unknown attributes. Thanks to
                <a href="https://github.com/ansman/validate.js/issues/43" target="_blank">Johannes Edelstam</a>
                for suggesting this.
              </li>
              <li>
                <b>Breaking:</b> <code>validate.async</code> now cleans attributes
                before resolving the promise. This can be disabled by
                setting the <code>cleanAttributes</code> option to <code>false</code>
                like this:
                <pre class="javascript"><code>validate.async.options = {cleanAttributes: false};</code></pre>
              </li>
              <li>
                Fix a bug where the <code>validate.XDate</code> would be ignored
                and the global XDate would be used instead.
                Thanks <a href="https://github.com/ansman/validate.js/pull/52" target="_blank">Andrew Luetgers</a>
                for fixing this.
              </li>
              <li>
                Add an options to the async validation to wrap the errors before
                passing them to the reject handler. Thanks
                <a href="https://github.com/ansman/validate.js/pull/57" target="_blank">Kristijan Sedlak</a>
                for suggesting and implementing this.
              </li>
              <li>
                <b>Breaking:</b> Async validators should now pass errors using
                the resolve callback. Rejecting with an error still works but
                will cause a warning. Thanks
                <a href="https://github.com/ansman/validate.js/pull/61" target="_blank">Timothy Moran</a>
                for suggesting and implementing this.
              </li>
            </ul>
          </div>
          <div id="changelog-0-7-1">
            <h3>
              <b class="version">0.7.1</b>
              -
              <span class="date">Apr 16, 2015</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.7.1/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.7.0...0.7.1">Diff</a>
            </h3>
            <ul>
              <li>
                Fixed an issue where dates would not be accepted by the presence
                validator due to an issue in <code>validate.isEmpty</code>.
                Thanks <a href="https://github.com/ansman/validate.js/issues/48" target="_blank">Yun Jia</a>
                for reporting this.
              </li>
            </ul>
          </div>
          <div id="changelog-0-7-0">
            <h3>
              <b class="version">0.7.0</b>
              -
              <span class="date">Mar 30, 2015</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.7.0/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.6.1...0.7.0">Diff</a>
            </h3>
            <ul>
              <li>Added <code>validate.version</code> as a way of gettings the version of the library.</li>
              <li>Added a <code>component.json</code> file for installation via componentjs.</li>
              <li>
                <b>Breaking:</b> Don't supply a name when calling <code>define</code>.
                Thanks <a href="https://github.com/ansman/validate.js/issues/20" target="_blank">Norman Xu</a> for reporting this.
              </li>
              <li>
                <b>Breaking:</b> If an async validator throws an error (or rejects
                the promise with an <code>Error</code>) the validation promise
                is rejected with the same error. Thanks
                <a href="https://github.com/ansman/validate.js/issues/10" target="_blank">Sebastian Seilund, Dmitry Kirilyuk and Dave Kushner</a>
                for helping out with the details of this.
              </li>
              <li>
                <b>Breaking:</b> The <b>flatten</b> option has been replaced with
                a new <b>format</b> option. Simply replace
                <code>flatten: true</code> with <code>format: "flat"</code> to
                migrate.
              </li>
              <li>
                Implement a way to get detailed errors that contains the
                validator, message, value etc.
                Thanks <a href="https://github.com/ansman/validate.js/issues/14" target="_blank">mattruby</a> for suggesting this.
              </li>
              <li>
                <code>%{value}</code> in messages is now replaced with the actual
                value. Thanks <a href="https://github.com/ansman/validate.js/issues/32" target="_blank">nyrsimon</a>
                for suggesting this.
              </li>
            </ul>
          </div>
          <div id="changelog-0-6-1">
            <h3>
              <b class="version">0.6.1</b>
              -
              <span class="date">Mar 30, 2015</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.6.1/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.6.0...0.6.1">Diff</a>
            </h3>
            <ul>
              <li>
                Fixed <code>validate.collectFormValues</code> for IE9 and IE10.<br>
                Thanks <a href="https://github.com/ansman/validate.js/pull/40" target="_blank">Kevin Burke</a> for reporting and fixing this.
              </li>
            </ul>
          </div>
          <div id="changelog-0-6-0">
            <h3>
              <b class="version">0.6.0</b>
              -
              <span class="date">Mar 15, 2015</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.6.0/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.5.0...0.6.0">Diff</a>
            </h3>
            <ul>
              <li>
                Async validation errors are no longer wrapped in the
                <code>validate.ValidationErrors</code> object.
              </li>
              <li>Document the utility functions used by this library.</li>
              <li>
                Add support for validating a single value. Thanks
                <a href="https://github.com/ansman/validate.js/issues/7" target="_blank">Aristides Lourenco</a>
                for suggesting and implementing this.
              </li>
              <li>All calls to <code>Promise</code> is now made with the <code>new</code> operator.</li>
              <li>
                <b>Breaking:</b> <code>require</code> is no longer used for
                dependency management. Validate.js will still look for moment,
                XDate and Promise in the global scope but not using require
                any more. They can be added by settings <code>validate.moment</code>,
                <code>validate.XDate</code> and <code>validate.Promise</code>
                respectively. The idea behind this is to stop using the
                <code>require</code> function improperly.
              </li>
            </ul>
          </div>
          <div id="changelog-0-5-0">
            <h3>
              <b class="version">0.5.0</b>
              -
              <span class="date">Mar 7, 2015</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.5.0/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.4.0...0.5.0">Diff</a>
            </h3>
            <ul>
              <li>
                <b>Breaking:</b> All validators besides <code>presence</code> now allow
                values that are rejected by the <code>presence</code> validator.
                Mostly this means that empty and whitespace only strings are
                now allowed by all validators except <code>presence</code>.
                Thanks <a href="https://github.com/ansman/validate.js/issues/31" target="_blank">droganov</a> for reporting this!
              </li>
              <li>
                Examples have now been added and can be found <a href="examples.html">here</a>.
                Thanks <a href="https://github.com/ansman/validate.js/issues/11" target="_blank">Alexander Sergéev</a> for suggesting this.
              </li>
              <li>
                Added a function to collect form values from a HTML form.
              </li>
              <li>
                Added an equality validator. Thanks
                <a href="https://github.com/ansman/validate.js/issues/29" target="_blank">Gutsulyak Dmitry</a> for suggesting this.
              </li>
              <li>
                Added support for validating HTML forms element by simply passing
                them instead of an attributes object.
              </li>
            </ul>
          </div>
          <div id="changelog-0-4-0">
            <h3>
              <b class="version">0.4.0</b>
              -
              <span class="date">Feb 6, 2015</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.4.0/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.3.2...0.4.0">Diff</a>
            </h3>
            <ul>
              <li><b>Breaking:</b> Empty and whitespace only strings are now valid emails.</li>
              <li>
                Fixed a bug where <code>fullMessages</code> didn't work in <code>validate.async</code>.
                Thanks <a href="https://github.com/ansman/validate.js/pull/9" target="_blank">sebastianseilund</a> for fixing this!
              </li>
              <li>
                Fixed an issue where values without the <code>length</code>
                attribute passed the <code>length</code> validator.
                Thanks <a href="https://github.com/ansman/validate.js/pull/13" target="_blank">Cellule</a> for fixing this!
              </li>
              <li>
                Make async errors an instance of <code>validate.ValidationErrors</code>.
                Thanks <a href="https://github.com/ansman/validate.js/issues/10" target="_blank">sebastianseilund, Jokero and dkushner</a>
                for helping with the details.
              </li>
              <li>
                Fix an error when nested objects are null.
                Thanks <a href="https://github.com/ansman/validate.js/issues/17" target="_blank">javve</a> for reporting this.
              </li>
              <li>
                Support fetching moment from the global scope and not just using <code>require</code>.
                Thanks <a href="https://github.com/ansman/validate.js/issues/18" target="_blank">alvipeo</a> for suggesting this.
              </li>
              <li>
                Support for default options and messages. Thanks <a href="https://github.com/ansman/validate.js/issues/16" target="_blank">tamtakoe</a>
                for suggesting this.
              </li>
              <li>
                Fix a bug in the date validator. Thanks
                <a href="https://github.com/ansman/validate.js/pull/27" target="_blank">Jokero</a>
                for fixing this.
              </li>
            </ul>
          </div>
          <div id="changelog-0-3-2">
            <h3>
              <b class="version">0.3.2</b>
              -
              <span class="date">Oct 5, 2014</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.3.2/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.3.1...0.3.2">Diff</a>
            </h3>
            <ul>
              <li>
                Pass the attributes as argument when resolving an async validation.
                Thanks <a href="https://github.com/pstoica" target="_blank">pstoica</a> for
                <a href="https://github.com/wrapp/validate.js/issues/25" target="_blank">suggesting</a> this.
              </li>
              <li>Move the repository from wrapp to ansman</li>
            </ul>
          </div>
          <div id="changelog-0-3-1">
            <h3>
              <b class="version">0.3.1</b>
              -
              <span class="date">Sep 22, 2014</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.3.1/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.3.0...0.3.1">Diff</a>
            </h3>
            <ul>
              <li>
                Fix <a href="https://github.com/wrapp/validate.js/issues/26" target="_blank">an issue</a> with the date validator that made it unusable.
                Thanks <a href="https://github.com/mrdanimal" target="_blank">mrdanimal</a> for reporting this.
              </li>
            </ul>
          </div>
          <div id="changelog-0-3-0">
            <h3>
              <b class="version">0.3.0</b>
              -
              <span class="date">Sep 5, 2014</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.3.0/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.2.0...0.3.0">Diff</a>
            </h3>
            <ul>
              <li>
                Allow upper case letters in email addresses
              </li>
              <li>
                <b>Breaking:</b> Nested validation - periods can now be used for validated nested objects. Thanks
                <a href="https://github.com/wrapp/validate.js/pull/20">colinskow</a> for implementing this.
              </li>
              <li>Support moment.js for datetime parsing and formatting</li>
            </ul>
          </div>
          <div id="changelog-0-2-0">
            <h3>
              <b class="version">0.2.0</b>
              -
              <span class="date">Jan 22, 2014</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.2.0/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.1.3...0.2.0">Diff</a>
            </h3>
            <ul>
              <li>
                Fix a bug where functions were considered blank. Thanks
                <a href="https://github.com/wrapp/validate.js/pull/9">MarFarMa</a> for discovering and fixing this.
              </li>
              <li>
                Added support for AMD (require.js, commonjs etc). Thanks to
                <a href="https://github.com/wrapp/validate.js/pull/8">zubulonj</a>
                for this.
              </li>
              <li><b>Breaking:</b> Dropped support for IE8</li>
              <li>Support for async validations</li>
            </ul>
          </div>
          <div id="changelog-0-1-3">
            <h3>
              <b class="version">0.1.3</b>
              -
              <span class="date">Nov 26, 2013</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.1.3/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.1.2...0.1.3">Diff</a>
            </h3>
            <ul>
              <li>Fix a bug where only upper cased 2 letter TLDs were allowed in the email validator</li>
              <li>More lax validation of the TLDs in the email validator</li>
            </ul>
          </div>
          <div id="changelog-0-1-2">
            <h3>
              <b class="version">0.1.2</b>
              -
              <span class="date">Nov 25, 2013</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.1.2/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.1.1...0.1.2">Diff</a>
            </h3>
            <ul>
              <li>Add bower.json</li>
              <li>Add an easy way of validating emails using the <a href="#validators-email">email validator</a></li>
            </ul>
          </div>
          <div id="changelog-0-1-1">
            <h3>
              <b class="version">0.1.1</b>
              -
              <span class="date">Nov 16, 2013</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.1.1/index.html">Docs</a>
              -
              <a href="https://github.com/ansman/validate.js/compare/0.1.0...0.1.1">Diff</a>
            </h3>
            <ul>
              <li>Fix a bug when fullMessages was false and errors were prefixed by ^</li>
            </ul>
          </div>
          <div id="changelog-0-1-0">
            <h3>
              <b class="version">0.1.0</b>
              -
              <span class="date">Nov 15, 2013</span>
              -
              <a href="http://htmlpreview.github.com/?https://raw.github.com/ansman/validate.js/0.1.0/index.html">Docs</a>
            </h3>
            <ul>
              <li>Initial release</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    $("#menu-button").on("click", function() {
      $("body").toggleClass("sidebar-shown");
    });

    $("#sidebar a").on("click", function() {
      $("body").removeClass("sidebar-shown");
    });
  </script>
</body>
</html>
